<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="{$urlStatic}/script/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="{$urlStatic}/script/jquery.Jcrop.js"></script>
<link rel="stylesheet" type="text/css" href="{$urlStatic}/css/JCrop/jquery.Jcrop.css" />
<link rel="stylesheet" href="{$urlStatic}/css/style.css" type="text/css" />
<script type="text/javascript">{literal}
$().ready(function(){

	$('#jcrop_target').Jcrop({
		onChange: showPreview,
		onSelect: showPreview,
		setSelect: [ 0, 0, 150, 150 ],
		minSize: [ 150, 150 ],
		aspectRatio: 1
	});
	
});

function showPreview(coords)
{
	if (parseInt(coords.w) > 0)
	{
		var rx = 150 / coords.w;
		var ry = 150 / coords.h;
 
		$('#preview').css({
			width: Math.round(rx * $('#jcrop_target').width()) + 'px',
			height: Math.round(ry * $('#jcrop_target').height()) + 'px',
			marginLeft: '-' + Math.round(rx * coords.x) + 'px',
			marginTop: '-' + Math.round(ry * coords.y) + 'px'
		});

		$('#coordsx').attr('value',coords.x);
		$('#coordsy').attr('value',coords.y);
		$('#coordsw').attr('value',coords.w);
		$('#coordsh').attr('value',coords.h);
		
	}
}

function updateAndClose(id,img, type) {
	window.parent.UpdatePicture(id,img, type);
}

{/literal}
</script>
</head>
<body style="text-align: left;">

<h2>{'select image'|t}</h2>

<hr/>
{if !isset($cropped)}
<form method="post" enctype="multipart/form-data">
	<input type="hidden" name="action" value="uploadImage" />
	<input type="hidden" name="MAX_FILE_SIZE" value="99999999" />
	<input type="file" name="image" />
	<input type="submit" value="{'upload'|t}" id="zalogujSie"/>
</form>
<p class="warning">{if isset($error)}{$error}{/if}</p>
{/if}

{if isset($allowCropp)}
<form method="post" action="{url label=getPhotoCropperAction type=$type action=save}">
	<input type="hidden" name="action" value="cropp" />
	<input type="hidden" name="coords[]" id="coordsx" value="0" />
	<input type="hidden" name="coords[]" id="coordsy" value="0" />
	<input type="hidden" name="coords[]" id="coordsw" value="150" />
	<input type="hidden" name="coords[]" id="coordsh" value="150" />
	<input type="hidden" name="file" value="{$imageSrc}" />
	
	
	<table cellpadding="0" cellspacing="0" border="0"> 
	<tr> 
		<td style="padding-right: 20px;"> 
			<img src="{$urlStatic}/{$imageSrc}" id="jcrop_target" /> 
		</td>
		 
		<td> podgląd:<br/>
			<div class="avatar">
			<div style="width:120px; height:120px; overflow:hidden;"> 
			
			<img src="{$urlStatic}/{$imageSrc}" id="preview" />
			
			</div>
			</div>
			
			<div class="clearBoth"></div> 	 
			<br/>
			<input type="submit" value="{'save image'|t}" id="wyslijZgloszenie" />
		</td> 
		</tr> 
	</table> 
	

	
</form>
{/if}
{if isset($cropped)}

<!-- {$imageSrc} -->

<script type="text/javascript">
	$().ready(function(){literal}{{/literal}updateAndClose('{$urlStatic}/{image src=$imageSrc w=150 h=150}', '{ $type }');{literal}}{/literal});
</script>
{/if}
</body>
</html>